<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
      <!-- <el-form-item label="模式选择" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择模式" clearable>
          <el-option label="PPI模式" value="PPI" />
          <el-option label="DBS模式" value="DBS" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="雷达选择">
         <el-select v-model="queryParams.city" placeholder="请选择雷达" @change="handleRadarChange">
          <el-option
            v-for="radar in radarOptions"
            :key="radar.city"
            :label="radar.label"
            :value="radar.city"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型">
          <el-select v-model="queryParams.type">
                <el-option label="设备状态" value="1" />
                <el-option label="设备连接" value="2" />
                <el-option label="风速报警" value="3" />
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
         <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['system:logininfor:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list" border  size="small">
      <el-table-column type="index" label="序号" width="100" />
      <!-- <el-table-column label="ID" align="center" prop="id" width="80" /> -->
      <el-table-column label="报警类型" align="center" prop="sourceTable" min-width="200">
        <template #default="scope">
          <span>{{ scope.row.type === '1' ? '设备状态' : scope.row.type === '2' ? '设备连接' : scope.row.type === '3' ? '风速报警' : '未知' }}</span>
        </template>
      </el-table-column>
       <el-table-column label="报警内容" align="center" prop="sourceTable" min-width="200">
        <template #default="scope">
          <span>{{ scope.row.type === '1' ? '设备不在线' : scope.row.type === '2' ? '设备连接异常' : scope.row.type === '3' ? '风速超过阈值' : '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center" prop="city" min-width="200">
        <template #default="scope">
          <span>{{ scope.row.city=='hefei' ? '合肥站' : '宣城站' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警时间" align="center" prop="createTime" min-width="200" />
      
    </el-table>

    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script setup name="logininfor">
import { onMounted } from 'vue'
import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
import { showTime } from '@/utils'
import {
  tableQuery,
  getConfig,
  putConfig,
  getAlarmList
} from '@/api/system/user'
// 遮罩层
const loading = ref(false)
// 选中数组
const ids = ref([])
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 表格数据
const list = ref([])
// 雷达选项配置，包含坐标和对应的城市代码
const radarOptions = ref([
  { label: '合肥站', city: 'hefei' },
  { label: '宣城站', city: 'xuancheng' },
])
class QueryParams{
  pageNum= 1
  pageSize= 10
  type=  ''
  city=  'hefei'
}
// 查询参数
const state = reactive({
  queryParams: new QueryParams(),
})
const { queryParams } = toRefs(state)


/** 查询数据列表 */
async function getList() {  
  loading.value = true
  
  try {
    let response = await getAlarmList(state.queryParams)
 
    
    if (response.code === 200) {
      // 处理返回的数据，确保字段名正确映射
      const rawData = response.data.result || []
      list.value = rawData
      total.value = response.data.totalNum || 0
    } else {
      list.value = []
      total.value = 0
      proxy.$modal.msgError(response.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    list.value = []
    total.value = 0
    proxy.$modal.msgError('获取数据失败')
  } finally {
    loading.value = false
  }
}



// 页面加载时执行配置获取
onMounted(() => {
  getList()
})

/** 搜索按钮操作 */
function handleQuery() {
  state.queryParams.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  state.queryParams = new QueryParams()
  handleQuery()
}
/** 删除按钮操作 */
function handleDelete(row) {
  const infoIds = row.infoId || ids.value
  proxy
    .$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return delLogininfor(infoIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
}
/** 清空按钮操作 */
function handleClean() {
  proxy
    .$confirm('是否确认清空所有登录日志数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return cleanLogininfor()
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('清空成功')
    })
}
/** 导出按钮操作 */
function handleExport() {
  proxy
    .$confirm('是否确认导出所有操作日志数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return exportLogininfor(queryParams)
    })
    .then((response) => {
      proxy.download(response.data.path)
    })
}

</script>

<style scoped lang="scss">
:deep(.el-table) {
  .el-table__row {
    height: 40px;
  }
  
  .el-table__cell {
    padding: 6px 8px;
  }
  
  .el-table__header {
    th {
      height: 40px;
      padding: 6px 8px;
    }
  }
}

// TimeSelector 组件样式 - 与 Element UI 默认样式保持一致
:deep(.time-selector) {
  .el-button {
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    color: #606266 !important;
    border-radius: 6px;
    
    &:hover {
      background: #ecf5ff !important;
      border-color: #c6e2ff !important;
      color: #409eff !important;
    }
    
    &:focus {
      background: #ecf5ff !important;
      border-color: #c6e2ff !important;
      color: #409eff !important;
    }
    
    &.is-active {
      background: #409eff !important;
      border-color: #409eff !important;
      color: #ffffff !important;
    }
  }
  
  .el-input__wrapper {
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 6px;
    
    &:hover {
      border-color: #c0c4cc !important;
    }
    
    &.is-focus {
      border-color: #409eff !important;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
    }
    
    .el-input__inner {
      color: #606266 !important;
      
      &::placeholder {
        color: #c0c4cc !important;
      }
    }
    
    .el-input__suffix {
      .el-input__suffix-inner {
        color: #c0c4cc !important;
      }
    }
  }
}
</style>
